<div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="AbnTestController">
	<div class="col w-lg bg-light b-r bg-auto">
    	<div class="wrapper-md">
		      <button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-block m-b">Change The Tree Definition</button>
		      <button ng-click="try_async_load()" class="btn btn-default btn-block">Load Tree Data Asynchronously</button>
		      <div class="line b-b line-lg"></div>
		      <h5>Test the Tree Control API:</h5>
		      <button ng-click="my_tree.select_first_branch()" class="btn btn-default btn-sm">First Branch</button>
		      <div class="m-t-sm m-b-sm">
		        <button ng-click="my_tree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</button>
		        <button ng-click="my_tree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</button>
		      </div>
		      <div class="m-b-sm">
		        <button ng-click="my_tree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</button>
		        <button ng-click="my_tree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</button>
		      </div>
		      <button ng-click="my_tree.select_parent_branch()" class="btn btn-default btn-sm">Parent</button>
		      <div class="m-t-sm m-b-sm">
		        <button ng-click="my_tree.expand_branch()" class="btn btn-default btn-sm">Expand</button>
		        <button ng-click="my_tree.collapse_branch()" class="btn btn-default btn-sm">Collapse</button>
		      </div>
		      <div class="m-t-sm m-b-sm">
		        <button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
		        <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>
		      </div>
		      <div class="line b-b line-lg"></div>
		      <button ng-click="try_adding_a_branch()" class="btn btn-success btn-sm"><i class="fa fa-fw m-r-xs fa-plus"></i> Add Branch</button>
		</div>
  	</div>
  	<div class="col">
    	<div class="wrapper-md">
      		<div class="b-a bg-light dk r r-2x">
		        <span ng-if="doing_async">loading...</span>
		        <abn-tree 
		          tree-data         = "my_data" 
		          tree-control      = "my_tree" 
		          on-select         = "my_tree_handler(branch)" 
		          expand-level      = "2" 
		          initial-selection = "Granny Smith"
		          icon-leaf         = "fa fa-file-o"
		          icon-expand       = "fa fa-plus"
		          icon-collapse     = "fa fa-minus"
		          >
		        </abn-tree>
     		</div>
    	</div>
  	</div>
  	<div class="col">
    	<div class="wrapper-md">
      		<div class="alert alert-info">{{output}}</div>
    	</div>
  	</div>
</div>